<template>
  <div class="view-content-box">
    <!-- <van-cell title="选择日期" :value="date" @click="show = true" />
    <van-calendar
      allow-same-day
      v-model:show="show"
      type="range"
      @confirm="onConfirm"
      :min-date="new Date(2010, 0, 1)"
    /> -->

    <div class="bg-fff py-15" v-if="loadListRef?.listMsg.rowTotal">
      <div class="all-pay-btn" @click.stop="pay">一键支付</div>
    </div>
    <LoadList
      ref="loadListRef"
      :loadingData="postBillPage"
      :query-params="queryParams"
      class="view-content"
      @ok="finishList"
    >
      <!-- v-if="bookList?.length" -->
      <template #list="{ list }">
        <van-collapse v-model="activeNames" ref="collapseRef">
          <van-collapse-item
            v-for="(item, index) in list"
            :key="item.id || index"
            :name="index"
          >
            <template #title>
              <div class="d-flex j-sb a-center mr-24">
                <div>
                  <div>{{ item.createTime }}</div>
                  <div>费用合计: {{ item.totalAmount }}</div>
                </div>
                <!-- <div
                  class="pay-btn"
                  v-if="item.status == 0"
                  @click.stop="pay(item)"
                >
                  立即支付
                </div> -->
              </div>
            </template>

            <div class="order-list d-flex flex-column grid-gap10">
              <div
                v-for="(ele, i) in item?.orderList"
                :key="ele.id || i"
                class="d-flex order-item"
              >
                <img :src="ele.avatar" alt="" />
                <div class="order-msg">
                  <div>
                    <div>昵称: {{ ele.nickname }}</div>
                    <div>套餐: {{ ele.packageName }}</div>
                  </div>
                  <div>
                    <div>时间: {{ ele.createTime }}</div>
                    <div>费用: {{ ele.amount }}</div>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </template>
    </LoadList>
    <!-- <van-empty description="暂无数据" /> -->
  </div>
</template>

<script setup>
import { postBillPage } from "@/api/index";
import { useDateRange } from "@/hooks/useDateRange";
import { onMounted, reactive } from "vue";
import moment from "moment";
const router = useRouter();
const bookList = ref([]);
const activeNames = ref([]);
const finishList = ({ list }) => {
  activeNames.value = list?.map((item, index) => index) || [];
};
const loadListRef = ref(null);
const { show, startTimeVal, endTimeVal, onConfirm, date } = useDateRange();
const queryParams = computed(() => {
  return {
    // startTime: startTimeVal.value,
    // endTime: endTimeVal.value,
  };
});
const collapseRef = ref(null);
onMounted(() => {
  // getList();
  console.log("collapseRef.value", collapseRef.value);
  nextTick(() => {
    collapseRef.value.toggleAll(true);
  });
});

const pay = () => {
  if (loadListRef.value.listMsg?.rowTotal > 0) {
    router.push({
      path: "/business/pay",
      // query: {
      //   total: item.totalAmount,
      //   id: item.id,
      // },
    });
  } else {
    Notify({ type: "danger", message: "暂无订单需要支付!" });
  }
};
</script>

<style lang="less" scoped>
:deep(.van-collapse-item) {
  .van-cell {
    align-items: center;
    position: sticky;
    // top: var(--van-tabs-line-height);
  }
}
:deep(.van-collapse-item__content) {
  background: #f8f8f8;
  padding: 0 24px;
}
.all-pay-btn {
  background: #fedc00;
  font-size: 24px;
  width: 150px;
  padding: 10px 20px;
  border-radius: 25px;
  text-align: center;
  margin-left: auto;
  margin-right: 20px;
}
.pay-btn {
  background: #fedc00;
  // margin-right: 16px;
  font-size: 24px;
  padding: 5px 5;
  border-radius: 25px;
  position: relative;
}
.order-list {
  background: #f8f8f8;
}
.order-item {
  padding: 24px;
  color: #252525;
  &:not(:last-child) {
    border-bottom: 1px solid #e3dede;
  }
  img {
    width: 100px;
    height: 100px;
    margin-right: 25px;
    border-radius: 50%;
    // background: #eee;
  }
  .order-msg {
    flex: 1;
    display: flex;

    // justify-content: space-between;
    > div {
      padding: 5px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:first-child {
        margin-right: 40px;
      }
      //   > span:first-child {
      //     margin-right: 20px;
      //   }
    }
  }
}
</style>
